<template>
 <div class="page">
  <nav-top title="支付订单"></nav-top> 
  <page-content>
  <order-breviary :data='orderBreviary'></order-breviary>
  <xl-content>
    <div class="content-block bb">
      <h1>支付方式</h1>
    </div>
    <div class="content-block tail-arrow bb">
      <div class="pay-way wechat">
        <p>微信支付</p>
        <p>微信安全支付</p>
      </div>
    </div>
    <div class="content-block tail-arrow bb">
      <div class="pay-way alipay">
        <p>支付宝支付</p>
        <p>支付宝安全支付</p>
      </div>
    </div>
  </xl-content>
  </page-content>
 </div> 
</template>

<script>
  import navTop from '@c/header/navTop'
  import pageContent from '@c/pagecontent'
  import xlContent from '@c/content'
  import orderBreviary from '@c/orderBreviary'
  export default {
    name: 'payMethod',
    components:{
      navTop,
      orderBreviary,
      pageContent,
      xlContent
    },
    data () {
      return {
        orderBreviary:{
          pic:'../../static/sununion_Teststrip_big3.jpg',
          title:'新联芯GPRS',
          num:2,
          unit:'套',
          trade_no:1478556622315
          // unitPrice:489
        }
      }
    }
  }
</script>

<style lang="scss">
.pay-way{
  padding:0 0 0 88px;
  position: relative;
  &:before{
    content:' ';
    width:44px;
    height:44px;
    display: inline-block;
    position: absolute;
    left: 10px;/*px*/
    top: 0;
    bottom:0;
    margin: auto;
  }
  &.wechat:before{
    background: url('../../static/list_icon_wechatpay_nor.png') center center no-repeat;
    background-size: contain;
  }
  &.alipay:before{
    background: url('../../static/list_icon_alipay_nor.png') center center no-repeat;
    background-size: contain;

  }
    p{
      // margin: 0 0 20px 0;
      &:first-child{
        font-size: 30px; /*px*/
        color:#333;
      }
      &:not(:first-child){
        font-size:26px;/*px*/
        color:#666;
      }
    }

} 
</style>